<template>
  <cu-custom bg-color="bg-white text-black" is-back bg-image="">
    <template #backText>返回</template>
  </cu-custom>
  <view class="container">
    <div class="page-tool">
      <div class="page-tool-item" @click="lastPage">上一页</div>
      <div class="page-tool-item" @click="nextPage">下一页</div>
      <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
      <div class="page-tool-item" @click="pageZoomOut">放大</div>
      <div class="page-tool-item" @click="pageZoomIn">缩小</div>
    </div>
    <view class="cu-bar bg-white solid-bottom">
      <view class="action text-black text-bold">
        <text class="cuIcon-titles text-orange"></text>
        <text class="text-xl">预览/下载</text>
      </view>
      <view class="action">
        <button
          class="cu-btn bg-gradual-blue shadow"
          form-type="submit"
          @click="downloadPDF"
        >
          保存
        </button>
      </view>
    </view>
  </view>
  <view class="preview-download">
    <div>
      <vue-pdf-embed
        :source="state.source"
        :style="scale"
        class="vue-pdf-embed"
        :page="state.pageNum"
      />
    </div>
  </view>
  <div v-if="cataList.length" class="popup-box">
    <scroll-view scroll-x="true" scroll-left="120">
      <view
        v-for="(item, index) in cataList"
        :key="index + current"
        class="cate-item"
        @click="setCurrent(index)"
      >
        <view :class="[{ 'text-active': current === index }]">
          {{ item.typeTitle }}
        </view>
      </view>
    </scroll-view>
    <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
      <view
        v-for="(item, index) in cataList"
        id="demo1"
        :key="index"
        class="scroll-view-item_H uni-bg-red"
        @click="changeType(item.type)"
      >
        <img :src="item.typeImage" alt="" class="cate-image" />
      </view>
      <!-- <view
        id="demo2"
        class="scroll-view-item_H uni-bg-green"
        @click="changeType(1)"
        >垂直</view
      > -->
    </scroll-view>
  </div>
</template>

<script setup lang="ts">
import { getpdf, getCate } from "@/api/index";
import { ref, onMounted, reactive, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
const current: any = ref(0);
const pdfUrl = ref("");
let cataList: any = ref([]);

const state = reactive({
  source: pdfUrl.value,
  pageNum: 1,
  scale: 0.7, // 缩放比例
  numPages: 0, // 总页数
});
const { infoForm } = reactive({
  infoForm: {
    isVertical: true,
    personal: null,
    workExperience: [],
    selfEvaluation: null,
    skills: [],
    hobby: null,
    educationalBg: [],
    certificate: [],
  },
});

onLoad((option: any) => {
  state.source = option.url;
  getOptions();
});
onShow(() => {
  uni.getStorage({
    key: "personal",
    success: ({ data }) => {
      infoForm.personal = data;
    },
  });

  uni.getStorage({
    key: "workExperience",
    success: ({ data }) => {
      infoForm.workExperience = data;
    },
  });

  uni.getStorage({
    key: "educationalBg",
    success: ({ data }) => {
      infoForm.educationalBg = data;
    },
  });

  uni.getStorage({
    key: "selfEvaluation",
    success: ({ data }) => {
      infoForm.selfEvaluation = data;
    },
  });

  uni.getStorage({
    key: "certificate",
    success: ({ data }) => {
      infoForm.certificate = data;
    },
  });

  uni.getStorage({
    key: "skills",
    success: ({ data }) => {
      infoForm.skills = data;
    },
  });

  uni.getStorage({
    key: "hobby",
    success: ({ data }) => {
      infoForm.hobby = data;
    },
  });
});

const downloadPDF = () => {
  window.open("http://localhost:3000" + state.source);
};

onMounted(() => {
  const loadingTask = createLoadingTask(state.source);
  loadingTask.promise.then((pdf: { numPages: number }) => {
    state.numPages = pdf.numPages;
  });
});

const scale = computed(() => `transform:scale(${state.scale})`);

//上一页
const lastPage = function () {
  if (state.pageNum > 1) {
    state.pageNum -= 1;
  }
};

//下一页
const nextPage = function () {
  if (state.pageNum < state.numPages) {
    state.pageNum += 1;
  }
};

//放大
const pageZoomOut = function () {
  if (state.scale < 2) {
    state.scale += 0.1;
  }
};

//缩小
const pageZoomIn = function () {
  state.scale -= 0.1;
};

//切换简历
const changeType = (type: number) => {
  uni.showLoading({
    title: "加载中",
  });
  getpdf({ ...infoForm, type: 1 }).then((res: any) => {
    state.source = res.data;
    uni.hideLoading();
  });
};

const setCurrent = (index: number) => {
  current.value = index;
};

const getOptions = async () => {
  let data: any = await getCate();
  cataList.value = data.data.data;
  console.log(cataList, "data");
};
</script>
<style scoped lang="scss">
.preview-download {
  padding: 10rpx;
  box-sizing: border-box;
  background-color: #333;
  overflow: hidden;
  width: 100%;
  z-index: 1; /* 设置z-index为1，保证页面上其他组件在web-view之上 */
}
.download-button {
  position: absolute;
  top: 20px;
  left: 50%;

  z-index: 2; /* 设置z-index为2，保证下载按钮在web-view之上 */
}
.popup-box {
  width: 750rpx;
  height: 350rpx;
  background-color: #333;
  position: fixed;
  bottom: 50rpx;
  overflow: scroll;
}
.scroll-Y {
  height: 300rpx;
}
.scroll-view_H {
  white-space: nowrap;
  width: 750rpx;
}
.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}
.scroll-view-item_H {
  display: inline-block;
  width: 200rpx;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
  border: 1px solid #e5e5e5;
  margin-left: 10rpx;
}
.cate-image {
  width: 100%;
  height: 100%;
}
.cate-item {
  display: inline-block;
  text-align: center;
  padding: 0 5px;
  color: rgb(194, 189, 189);
  line-height: 60rpx;
}
.text-active {
  color: #2e92fd !important;
}
.pdf-preview {
  position: relative;
  padding: 20px 0;
  box-sizing: border-box;
  background-color: e9e9e9;
}
.pdf-wrap {
  overflow-y: auto;
}
.vue-pdf-embed {
  transform-origin: 0 0;
  text-align: center;
  width: 1040rpx;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
  box-sizing: border-box;
}

.page-tool {
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  z-index: 100;
  cursor: pointer;
  margin: 0 auto;
  background-color: white;
}
.page-tool-item {
  width: 20%;
  text-align: center;
  cursor: pointer;
}
</style>
